import React, { useState, useEffect } from 'react';
import classname from 'classnames';
import _ from 'lodash';
import styles from './index.less';

const leftDefaultStyles = {
  display: 'none',
  bottom: '300px',
};
const leftToggleDefaultStyles = {
  left: '0',
  transform: 'translateY(0)',
};

const bottomDefaultStyles = {
  display: 'none',
  right: '0',
};
const bottomToggleDefaultStyles = {
  bottom: '0',
  transform: 'translateX(0)',
};

const menuDefaultStyles = {};

const GisContent: React.FC<{}> = (props) => {
  const [bottomHeight, setBottomHeight] = useState(300);

  const [leftActive, handleChangeRightToggle] = useState(false);
  const [rightActive, handleChangeLeftToggle] = useState(false);
  const [bottomActive, handleChangeBottomToggle] = useState(false);

  const [leftStyles, handleLeftStyles] = useState(leftDefaultStyles);
  const [leftToggleStyles, handleLeftToggleStyles] = useState(leftToggleDefaultStyles);

  const [bottomStyles, handleBottomStyles] = useState(bottomDefaultStyles);
  const [bottomToggleStyles, handleBottomToggleStyles] = useState(bottomToggleDefaultStyles);

  const [menuStyles, handleMenuStyles] = useState(menuDefaultStyles);

  const $body = document.body;

  // 左侧显示/隐藏
  useEffect(() => {
    const leftStyles = { ...leftDefaultStyles };
    const leftToggleStyles = { ...leftToggleDefaultStyles };

    if (leftActive) {
      leftStyles.display = 'block';
      leftStyles.bottom = `${bottomActive ? bottomHeight : 0}px`;
      leftToggleStyles.left = '300px';
      leftToggleStyles.transform = `translateY(${bottomActive ? -bottomHeight / 2 : 0}px)`;
    } else {
      leftStyles.display = 'none';
      leftStyles.bottom = `${bottomActive ? bottomHeight : 0}px`;
      leftToggleStyles.left = '0';
      leftToggleStyles.transform = `translateY(${bottomActive ? -bottomHeight / 2 : 0}px)`;
    }
    handleLeftStyles(leftStyles);
    handleLeftToggleStyles(leftToggleStyles);
  }, [leftActive, bottomHeight, bottomActive]);

  // 底部显示/隐藏
  useEffect(() => {
    const bottomStyles = { ...bottomDefaultStyles };
    const bottomToggleStyles = { ...bottomToggleDefaultStyles };

    if (bottomActive) {
      console.log({ bottomActive, rightActive });
      bottomStyles.display = 'block';
      bottomStyles.right = rightActive ? '300px' : '0';
      bottomToggleStyles.bottom = '300px';
      bottomToggleStyles.transform = `translateX(${rightActive ? '-150px' : '0'})`;
    } else {
      console.log({ bottomActive, rightActive });
      bottomStyles.display = 'none';
      bottomStyles.right = rightActive ? '300px' : '0';
      bottomToggleStyles.bottom = '0';
      bottomToggleStyles.transform = `translateX(${rightActive ? '-150px' : '0'})`;
    }
    console.log(bottomToggleStyles);
    handleBottomStyles(bottomStyles);
    handleBottomToggleStyles(bottomToggleStyles);
  }, [bottomActive, rightActive]);

  // 鼠标按下
  const handleMouseDown = () => {
    console.log('鼠标按下');
    $body.style.userSelect = 'none';
    $body.style.cursor = 'n-resize';
    $body.addEventListener('mousemove', handleMove);
    // 鼠标弹起时 移除事件。
    $body.addEventListener('mouseup', handleMouseup);
  };

  const handleMouseup = () => {
    console.log('鼠标弹起时 移除事件。');
    $body.style.userSelect = '';
    $body.style.cursor = '';
    $body.removeEventListener('mousemove', handleMove);
    $body.removeEventListener('mouseup', handleMouseup);
  };

  // 鼠标移动
  const handleMove = ({ clientY }: any) =>
    setBottomHeight(document.documentElement.offsetHeight - clientY + 2);

  // _.throttle(, 60);

  return (
    <div className={styles.content}>
      <div style={menuStyles} className={styles.menu}>
        菜单{bottomHeight} {rightActive ? 'true' : 'false'}
      </div>

      <div style={leftStyles} className={styles.left}>
        左侧
      </div>
      <div className={classname(styles.right, { [styles.active]: rightActive })}>右侧</div>
      <div style={{ ...bottomStyles, height: `${bottomHeight}px` }} className={styles.bottom}>
        <div onMouseDown={handleMouseDown} className={styles.bottomMove} />
        底部
      </div>

      <div
        style={leftToggleStyles}
        className={styles.toggleLeft}
        onClick={() => handleChangeRightToggle(!leftActive)}
      />
      <div
        style={{ transform: `translateY(${bottomActive ? -bottomHeight / 2 : 0}px)` }}
        className={classname(styles.toggleRight, { [styles.active]: rightActive })}
        onClick={() => handleChangeLeftToggle(!rightActive)}
      />
      <div
        style={{ ...bottomToggleStyles, bottom: `${bottomActive ? bottomHeight : 0}px` }}
        className={styles.toggleBottom}
        onClick={() => handleChangeBottomToggle(!bottomActive)}
      />
    </div>
  );
};

export default GisContent;
